<template>
  <div class="login">
    <div class="jsJacker">
      <JsHacker></JsHacker>
    </div>

    <!--账号登录-->
    <div class="loginBox">
      <!--【账号】【免密】-->
      <div class="top">
        <div @click="accountLogin" v-bind:class="accountLoginClazz">账号</div>
        <div @click="verifyCodeLogin" v-bind:class="verifyCodeLoginClazz">免密码</div>
      </div>

      <!--登录面板-->
      <div class="loginBody">
        <div v-if="flag">
          <!--账号登录-->
          <AccountLogin></AccountLogin>
        </div>
        <div v-else="!flag">
          <!--验证码登录-->
          <VerifyCodeLogin></VerifyCodeLogin>
        </div>
      </div>

      <!--第三方登录-->
      <div class="bottom">
<!--        <ThirdPartyLinks></ThirdPartyLinks>-->
      </div>
    </div>
  </div>
</template>

<script>
  import AccountLogin from "@/components/login/AccountLogin"
  import VerifyCodeLogin from "@/components/login/VerifyCodeLogin"
  import ThirdPartyLinks from "@/components/login/ThirdPartyLinks"
  import JsHacker from "@/components/login/JsHacker"

  export default {
    name: "",
    components: {
      AccountLogin,
      VerifyCodeLogin,
      ThirdPartyLinks,
      JsHacker
    },
    data() {
      return {
        //登录方式 字体设置
        accountStyleFlag: false,
        verifyCodeStyleFlag: false,
        //选择 【账号登录true】【免密码登录false】
        flag: true
      }
    },
    computed: {
      accountLoginClazz: function () {
        return {
          account: true,
          accountStyle: this.accountStyleFlag
        }
      },
      verifyCodeLoginClazz: function () {
        return {
          verifyCode: true,
          verifyCodeStyle: this.verifyCodeStyleFlag
        }
      }
    },
    methods: {
      //点击账号事件
      accountLogin: function () {
        //账号/验证码 样式
        this.accountStyleFlag = true;
        this.verifyCodeStyleFlag = false
        this.flag = true;
      },
      //点击验证码事件
      verifyCodeLogin: function () {
        //账号/验证码 样式
        this.verifyCodeStyleFlag = true;
        this.accountStyleFlag = false
        this.flag = false;
      }
    },
    mounted() {
      this.accountStyleFlag = true;
    }
  }
</script>

<style scoped>
  .login {
    width: 100%;
    min-height: calc(100vh - 70px);
    /*相对自身定位*/
    position: relative;
  }

  /*登录盒子*/
  .loginBox{
    width: 320px;
    /*height: 360px;*/
    /*border: 1px solid black;*/
    background-color: #F0F0F0;
    border-radius: 4px;

    /*相对父盒子定位*/
    position: absolute;
    top: calc(20%);
    right: calc(12%);
  }

  /*登录盒子 【账号】【免密】样式*/
  .loginBox .top{
    width: calc(100% - 4px);
    height: 60px;
    margin: 2px auto;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }

  /*登录方式字体设置*/
  .account,
  .verifyCode{
    font-size: 18px;
    color: #888;
    width: 50%;
    float: left;
    line-height: 60px;
  }

  /*登录方式点击改变样式*/
  .accountStyle,
  .verifyCodeStyle {
    color: #F00;
    font-weight: bolder;
    border-bottom-color: #F00;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
</style>
